import React, { Component } from 'react'
import store, {actions} from '../store/index'
import { NavLink } from 'react-router-dom'

export default class Redux extends Component {
  constructor() {
    super()
    this.state = {

    }
  }
  componentDidMount() {
    // 加载页面时，从store中获取数据，存入state，用于页面的展示
    // let {age, name} = store.getState();
    // let obj = store.getState();
    // console.log(obj);
    // 下面的写法是简写
    this.setState(store.getState());
    // subscribe会在store变化时自动执行
    this.unSub = store.subscribe(()=> {
      this.setState(store.getState());
    })
  }
  componentWillUnmount() {
    // 再調用一次监听，目的是取消订阅
    this.unSub()
  }
  ageAdd() {
    // 通过dispatch触发修改，action是一个js对象
    // store.dispatch({type: 'add'}); // 这是原始版本，需要手写action，比较慢还容易错
    console.log(actions.add());
    store.dispatch(actions.add());
  }
  changeName() {
    // store.dispatch({type: 'changeName', name: 'Tony'});
    store.dispatch(actions.changeName('Ttttt'));
  }
  render() {
    return (
      <div>
        <div>Redux使用示例</div>
        <div>姓名：{this.state.name}</div>
        <div>年龄：{this.state.age}</div>
        <button onClick={()=>this.ageAdd()}>年龄+1</button>
        <button onClick={()=>this.changeName()}>修改名字</button>
        <NavLink to="redux2">Redux2</NavLink>
      </div>
    )
  }
}
